/*
 * @Description: 更新日志
 * @Author: Rfan
 * @Date: 2022-06-02 17:25:03
 * @LastEditTime: 2022-07-02 18:23:37
 */

import { useEffect, useState } from 'react';
import { Tag, Timeline, Typography } from 'antd';
import classNames from 'classnames/bind';
import { fetchChangeLogList } from '@/api/system';
import { formatDate } from '@/utils';

import styles from './styles/index.module.scss';

const cx = classNames.bind(styles);

const ChangeLog = () => {
  const [logList, setLogList] = useState([]);
  useEffect(() => {
    fetchChangeLogList({}).then((res) => {
      setLogList(res.data);
    });
  }, []);

  const InfoList = (props: any = []) => {
    const { list } = props;
    console.log({ list });
    return (
      <ul>
        {list.map((item: any) => (
          <li className={cx('update-item')}>
            {item.logType}：{item.logInfo}
          </li>
        ))}
      </ul>
    );
  };

  return (
    <div style={{ padding: '36px' }}>
      <Typography.Title level={3}>更新日志</Typography.Title>
      <p></p>
      <Timeline>
        {logList.map((item: any) => (
          <Timeline.Item>
            <Typography.Title level={4}>{item.updateVersion}</Typography.Title>
            <Tag color="blue">{formatDate(item.updateTime, 'YYYY-MM-DD')}</Tag>
            <InfoList list={item.updateInfoList || []} />
          </Timeline.Item>
        ))}
      </Timeline>
    </div>
  );
};

export default ChangeLog;
